<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="750px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
          <el-form-item label="商品名" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="form.code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="规格" prop="spac">
            <el-input v-model="form.spac" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="商品图片" prop="skuImg">
            <MaterialList v-model="form.imageArr" style="width: 500px" type="image" :num="1" :width="150" :height="150" />
            建议尺寸 335*95
          </el-form-item>
          <el-form-item label="轮播小视频" prop="videoUrl">
            <file-upload v-model="form.videoUrl" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="轮播图片" prop="headImgs">
            <MaterialList v-model="form.sliderImageArr" style="width: 500px" type="image" :num="5" :width="150" :height="150" />
            建议尺寸 375*375
          </el-form-item>
          <el-form-item label="物料下载地址" prop="material">
            <file-upload v-model="form.material" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="上市时间" prop="addTime">
            <template>
              <el-date-picker
                v-model="form.addTime"
                type="datetime"
                placeholder="选择上市时间"
              />
            </template>
          </el-form-item>
          <el-form-item label="退市时间" prop="outTime">

            <template>
              <el-date-picker
                v-model="form.outTime"
                type="datetime"
                placeholder="选择退市时间"
              />
            </template>
          </el-form-item>
          <el-form-item label="价格有效时间" prop="effeTime">

            <template>
              <el-date-picker
                v-model="form.effeTime"
                type="datetime"
                placeholder="选择价格有效时间"
              />
            </template>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="一级供货价(元)" prop="firstSourcePrice">
                <el-input v-model="form.firstSourcePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="150px" label="一级建议售价(元)" prop="firstSalePrice">
                <el-input v-model="form.firstSalePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="二级供货价(元)" prop="secondSourcePrice">
                <el-input v-model="form.secondSourcePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="150px" label="二级建议售价(元)" prop="secondSalePrice">
                <el-input v-model="form.secondSalePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="三级供货价(元)" prop="thridSourcePrice">
                <el-input v-model="form.thridSourcePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="150px" label="三级建议售价(元)" prop="thridSalePrice">
                <el-input v-model="form.thridSalePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="零售供货价(元)" prop="sourcePrice">
                <el-input v-model="form.sourcePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="150px" label="零售建议售价(元)" prop="salePrice">
                <el-input v-model="form.salePrice" style="width: 150px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          <!-- <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> -->

        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('id')" width="50px" prop="id" label="ID" />
        <el-table-column v-if="columns.visible('name')" prop="name" label="商品名" />
        <!-- <el-table-column v-if="columns.visible('code')" prop="code" label="商品编码" /> -->

        <el-table-column v-if="columns.visible('spac')" prop="spac" label="规格" />
        <el-table-column v-if="columns.visible('skuImg')" width="80px" prop="skuImg" label="商品图片">
          <template slot-scope="scope">
            <a :href="scope.row.skuImg" style="color: #42b983" target="_blank"><img :src="scope.row.skuImg" alt="点击打开" class="el-avatar"></a>
          </template>
        </el-table-column>

        <el-table-column v-if="columns.visible('videoUrl')" prop="videoUrl" label="小视频">
          <template slot-scope="scope">
            <a v-if="scope.row.videoUrl" target="_blank" :href="scope.row.videoUrl">{{ scope.row.videoUrl }}</a>
          </template>
        </el-table-column>

        <el-table-column v-if="columns.visible('status')" width="80px" prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0 ">未发布</el-tag>
            <el-tag v-if="scope.row.status === 1 " style="color: green" type="success">已发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('sourcePrice')" width="80px" prop="sourcePrice" label="供货价/元">
          <template slot-scope="scope">
            <span>{{ "￥" + (scope.row.sourcePrice /100).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('salePrice')" width="80px" prop="salePrice" label="售价/元">
          <template slot-scope="scope">
            <span>{{ "￥" + (scope.row.salePrice /100).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('addTime')" width="120px" prop="addTime" label="上市时间">
          <template slot-scope="scope">
            <span>{{ formatTimeThrid(scope.row.addTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('outTime')" width="120px" prop="outTime" label="退市时间">
          <template slot-scope="scope">
            <span>{{ formatTimeThrid(scope.row.outTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('effeTime')" width="120px" prop="effeTime" label="价格有效时间">
          <template slot-scope="scope">
            <span>{{ formatTimeThrid(scope.row.effeTime) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="columns.visible('firstSourcePrice')" prop="firstSourcePrice" label="一级供应商供货价(分)" />
        <el-table-column v-if="columns.visible('firstSalePrice')" prop="firstSalePrice" label="一级供应商建议售价(分)" />
        <el-table-column v-if="columns.visible('secondSourcePrice')" prop="secondSourcePrice" label="二级供应商供货价(分)" />
        <el-table-column v-if="columns.visible('secondSalePrice')" prop="secondSalePrice" label="二级供应商建议售价(分)" />
        <el-table-column v-if="columns.visible('thridSourcePrice')" prop="thridSourcePrice" label="三级供应商供货价(分)" />
        <el-table-column v-if="columns.visible('thridSalePrice')" prop="thridSalePrice" label="三级供应商建议售价(分)" /> -->

        <el-table-column v-if="columns.visible('createTime')" width="90px" prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="columns.visible('createUser')" prop="createUser" label="创建用户" /> -->
        <!-- <el-table-column v-if="columns.visible('updateTime')" prop="updateTime" label="更新时间" /> -->
        <!-- <el-table-column v-if="columns.visible('updateUser')" prop="updateUser" label="更新用户" /> -->
        <el-table-column v-permission="['admin','supplierGoodsSku:edit','supplierGoodsSku:del','supplierGoodsSku:publish']" fixed="right" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />

          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudSupplierGoodsSku from '@/api/supplier/supplierGoodsSku'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from './UD.operation'
import pagination from '@crud/Pagination'
import MaterialList from '@/components/material'
import fileUpload from '@/components/file-upload'

import { formatTimeThrid, formatTimeTwo, parseTime } from '@/utils/index'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '商品', url: 'api/supplierGoodsSku', sort: 'id,desc', crudMethod: { ...crudSupplierGoodsSku }})
const defaultForm = { id: null, name: null, code: null, status: 0, spac: null,
  skuImg: null, headImgs: null, material: null, addTime: null,
  outTime: null, effeTime: null, firstSourcePrice: null, firstSalePrice: null,
  secondSourcePrice: null, secondSalePrice: null, thridSourcePrice: null,
  thridSalePrice: null, sourcePrice: null, salePrice: null, isDel: 0,
  createTime: null, createUser: null, updateTime: null, updateUser: null,
  imageArr: [], sliderImageArr: [], fileList: '', videoUrl: null
}
export default {
  name: 'SupplierGoodsSku',
  components: { pagination, crudOperation, rrOperation, udOperation, MaterialList, fileUpload },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'supplierGoodsSku:add'],
        edit: ['admin', 'supplierGoodsSku:edit'],
        del: ['admin', 'supplierGoodsSku:del'],
        publish: ['admin', 'supplierGoodsSku:publish']
      },
      rules: {
        name: [
          { required: true, message: '商品名不能为空', trigger: 'blur' }
        ],
        spac: [
          { required: true, message: '规格不能为空', trigger: 'blur' }
        ],
        skuImg: [
          { required: true, message: '商品图片不能为空', trigger: 'blur' }
        ],
        headImgs: [
          { required: true, message: '轮播图片不能为空', trigger: 'blur' }
        ],
        material: [
          { required: true, message: '物料下载地址不能为空', trigger: 'blur' }
        ],
        addTime: [
          { required: true, message: '上市时间不能为空', trigger: 'blur' }
        ],
        outTime: [
          { required: true, message: '退市时间不能为空', trigger: 'blur' }
        ],
        effeTime: [
          { required: true, message: '价格有效时间不能为空', trigger: 'blur' }
        ],
        firstSourcePrice: [
          { required: true, message: '一级供应商供货价不能为空', trigger: 'blur' }
        ],
        firstSalePrice: [
          { required: true, message: '一级供应商建议售价不能为空', trigger: 'blur' }
        ],
        secondSourcePrice: [
          { required: true, message: '二级供应商供货价不能为空', trigger: 'blur' }
        ],
        secondSalePrice: [
          { required: true, message: '二级供应商建议售价不能为空', trigger: 'blur' }
        ],
        thridSourcePrice: [
          { required: true, message: '三级供应商供货价不能为空', trigger: 'blur' }
        ],
        thridSalePrice: [
          { required: true, message: '三级供应商建议售价不能为空', trigger: 'blur' }
        ],
        sourcePrice: [
          { required: true, message: '零售供货价不能为空', trigger: 'blur' }
        ],
        salePrice: [
          { required: true, message: '零售建议售价不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'form.imageArr': function(val) {
      if (val) {
        this.form.skuImg = val.join(',')
      }
    },
    'form.sliderImageArr': function(val) {
      if (val) {
        this.form.headImgs = val.join(',')
      }
    }
  },
  methods: {
    formatTimeThrid,
    formatTimeTwo,
    parseTime,
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const ids = this.crud.selections
      console.log('beforeRefresh===>', ids)
      const query = this.query
      if (query.type && query.value) {
        this.crud.params[ids] = ids
      }
      return true
    },
    // 打开新增、编辑后的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      console.log('afterToCU==>', crud.status.edit, CRUD.STATUS.PREPARED)
      if (crud.status.edit === CRUD.STATUS.PREPARED) {
        form.imageArr.push(form.skuImg)
        if (form.headImgs && form.headImgs.length > 0) {
          form.sliderImageArr = form.headImgs.split(',')
        }
        form.firstSourcePrice = (form.firstSourcePrice / 100).toFixed(2)
        form.firstSalePrice = (form.firstSalePrice / 100).toFixed(2)

        form.secondSourcePrice = (form.secondSourcePrice / 100).toFixed(2)
        form.secondSalePrice = (form.secondSalePrice / 100).toFixed(2)

        form.thridSourcePrice = (form.thridSourcePrice / 100).toFixed(2)
        form.thridSalePrice = (form.thridSalePrice / 100).toFixed(2)

        form.sourcePrice = (form.sourcePrice / 100).toFixed(2)
        form.salePrice = (form.salePrice / 100).toFixed(2)
      }
    },
    // 打开新增、编辑前的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      console.log('beforeToCU==>', crud.status.edit)
    },
    // 打开新增、编辑前的操作
    [CRUD.HOOK.beforeSubmit](crud, form) {
      console.log('beforeSubmit==>', crud.status.edit, crud, form)

      if (this.form.addTime instanceof Date) {
        this.form.addTime = this.form.addTime.getTime()
      }
      if (this.form.outTime instanceof Date) {
        this.form.outTime = this.form.outTime.getTime()
      }
      if (this.form.effeTime instanceof Date) {
        this.form.effeTime = this.form.effeTime.getTime()
      }

      if (crud.status.add === CRUD.STATUS.PREPARED) {
        this.form.createTime = new Date().getTime()
        this.form.createUser = this.$store.getters.user.username
      }
      this.form.firstSourcePrice = this.form.firstSourcePrice * 100
      this.form.firstSalePrice = this.form.firstSalePrice * 100

      this.form.secondSourcePrice = this.form.secondSourcePrice * 100
      this.form.secondSalePrice = this.form.secondSalePrice * 100

      this.form.thridSourcePrice = this.form.thridSourcePrice * 100
      this.form.thridSalePrice = this.form.thridSalePrice * 100

      this.form.sourcePrice = this.form.sourcePrice * 100
      this.form.salePrice = this.form.salePrice * 100
    }

  }
}
</script>

<style scoped>

</style>
